<template>
	<view class="home-page">
		<u-navbar leftIconColor="#fff" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				賬戶設置
			</view>
		</u-navbar>
		<view class="box">
			<view class="item">
				<view class="item-left">
					<view class="item-text">
						修改頭像
					</view>
					<image :src="head ||'../../../static/tabbar/my1.png'" mode="" @click="upfun"></image>
				</view>
			</view>
			<view class="item">
				<view class="item-left">
					<view class="item-text">
						修改暱稱
					</view>
					<view class="name">
						<u-input inputAlign="right" placeholder="請輸入新暱稱" border="none" v-model="name"></u-input>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="upInfo">
			<u-button type="primary" color="#147D50" text="保存資料" shape="circle" size="large"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				head: ''
			}
		},
		onLoad() {
			this.getsuerinfo()
		},
		methods: {
			getsuerinfo() {
				let params = {

				}
				this.$Request({
					method: 'GET',
					url: '/app-api/member/user/get',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 0) {
						this.name = res.data.nickname
						this.head = res.data.avatar
					}
				})
			},
			modifyInfo() {

			},
			upfun() {
				const app = this
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async function(res) {
						uni.showLoading({
							mask: true,
							title: '上传中'
						})
						const result = await app.uploadFilePromise(res.tempFilePaths[0])
						uni.hideLoading()
						app.head = result
						console.log(app.head)
					},
				});
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://m.shuabanli.com:48080/app-api/infra/file/upload',
						filePath: url,
						name: 'file',
						header: {
							Authorization: uni.getStorageSync("token") || '',
						},
						success: (res) => {
							let info = JSON.parse(res.data)
							if (info.code == 0) {
								setTimeout(() => {
									resolve(info.data)
								}, 1000)
							} else {

								uni.showToast({
									title: info.msg,
									icon: 'none'
								})
							}
						}
					});
				})
			},
			upInfo() {
				let params = {
					nickname: this.name,
					avatar:this.head
				}
				this.$Request({
					method: 'PUT',
					url: '/app-api/member/user/update',
					data: params,
					ismsg: true,
				}).then(res => {
					if (res.code == 0) {
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-page {
		background-image: url('../../../static/real/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 362rpx;
		min-height: 90vh;
		padding: 30rpx;

		.nav-title {
			color: #fff;
		}

		.box {
			border-radius: 20rpx;
			background-color: #fff;
			box-shadow: 0rpx 7rpx 17rpx 1rpx rgba(20, 125, 80, 0.06);
			padding: 20rpx;

			.item {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 30rpx;

				.item-left {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						width: 180rpx;
					}

					.item-text {
						margin-right: 10rpx;
					}

					image {
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
					}
				}
			}

			.item:last-child {
				margin-bottom: 0;
			}
		}

		.btn {
			width: 90%;
			position: fixed;
			bottom: 5%;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
</style>